<template>
    <div>
        <h2>修改姓名：{{user.name}}</h2>
        <button @click="user.name+='-'">修改姓名</button>
        <h2>修改工作：{{user.job}}</h2>
        <button @click="changeJob">修改工作</button>
        <h2>薪水：{{user.friend.job.salary}}</h2>
        <button @click="user.friend.job.salary++">修改薪水</button>
    </div>
    <!-- watch/watchEvent -->
    <div>----------------------------------------</div>
    <div>
        <h2>当前和为：{{count}}</h2>
        <button @click="count++">点击+1</button>
        <h2>当前年龄为：{{age}}</h2>
        <button @click="age++">点击+1</button>
    </div>
</template>
<script>
import { ref, defineComponent, reactive, computed, watch, watchEffect } from 'vue'
export default defineComponent({
    name: 'Setup',
    components: {  },
    setup () {
        const user = reactive({
            name: 'aa',
            job: '前端',
            friend: {
                job: {
                    salary: 100
                }
            }
        })
        let count = ref(0)
        let age = ref(18)
        // 1.监听ref定义的一个响应式数据
        // watch(count, (oldVal, newVal) => {
        //     console.log(oldVal, newVal)
        // })
        // 2.监听ref定义的多个响应式数据
        // watch([count, age], (oldVal, newVal) => {
        //     console.log(oldVal, newVal)
        // })
        // 3.监听reactive定义的一个响应式数据的全部属性(此时不能正确获取oldValue的值)
        // watch(user, (oldVal, newVal) => {
        //     console.log(oldVal, newVal)
        // })
        // 4.监听reactive定义的一个响应式数据的一个属性
        // 错误的
        // watch(user.name, (oldVal, newVal) => {
        //     console.log(oldVal, newVal)
        // })
        // 正确的
        // watch(() => user.name, (oldVal, newVal) => {
        //     console.log(oldVal, newVal)
        // })
        // 5.监听reactive定义的多个属性
        // watch([() => user.name, () => user.job], (oldVal, newVal) => {
        //     console.log(oldVal, newVal)
        // })
        // 6.配置项
        watch(() => user.friend, (oldVal, newVal) => {
            console.log(oldVal, newVal)
        }, {
            deep: true
        })
        function changeJob () {
            user.job = '后端'
        }
        return {
            user,
            count,
            age,
            changeJob
        }
    }
})
</script>
<style lang="">
    
</style>